<template>
	<view class="page-container">
		<!-- 自定义导航栏 -->
		<CustomNavBar :title="merchantInfo?.merName">
			<template v-slot:left>
				<view class="back uni-flex uni-align-center uni-justify-center" @click="goBack"><uni-icons type="left"
						size="20"></uni-icons></view>
			</template>
		</CustomNavBar>

		<!-- 头部图片 -->
		<view class="merchant-box">
			<!-- <image class="merchant-image" :src="merchantInfo?.merImagesList[0]" mode="aspectFill"></image> -->
			<uni-swiper-dot class="uni-swiper-dot-box" :info="merchantInfo?.merImagesList" :current="currentSwiper"
				mode="dot" :dots-styles="dotsStyles" field="content">
				<swiper class="swiper-box" :autoplay="false" :current="currentSwiper" @change="changeSwiper" circular>
					<swiper-item v-for="(item, index) in merchantInfo?.merImagesList" :key="index">
						<view class="swiper-item">
							<image class="merchant-image" mode="aspectFill" :src="item" />
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>

		<view class="merchant-card">

			<!-- 店铺名称 -->
			<view class="merchant-name-box">
				<text class="merchant-name">{{ merchantInfo?.merName||'--' }}</text>
				<view class="collect-box" @click='collectHandle'>
					<image :src="`${$ImgBaseUrl}near-Nocollect.png`" mode="" class="collect-icon" v-if="!isCollected">
					</image>
					<image :src="`${$ImgBaseUrl}near-collect.png`" v-if="isCollected" mode="widthFix"
						class="collect-icon" />
				</view>
			</view>
			<!-- 商家简介 -->
			<view class="merchant-intro" v-if="merchantInfo?.remark">
				<rich-text :nodes="merchantInfo.remark"></rich-text>
			</view>

			<!-- 地址与距离 - 自适应宽高区域 -->
			<view class="box">
				<view class="address-info">
					<text class="address-value">{{ merchantInfo?.merAddress||'--' }}</text>
					<text class="distance">距您{{ merchantInfo?.distance}}km</text>
				</view>
				<view class="contact-info">
					<view class="nav-box" @click="navigateToMap">
						<image :src="`${$ImgBaseUrl}near-nav.png`" mode="" class="nav-icon"></image>
						<text>导航</text>
					</view>
					<view class="call-box" @click="makeCall">
						<image :src="`${$ImgBaseUrl}near-call.png`" mode="" class="call-icon"></image>
						<text>电话</text>
					</view>
				</view>
			</view>
			<!-- 抖音 -->
			<view class="dy">
				<text class="dy-text">商铺抖音：</text>
			</view>

			<!-- 回购链接 -->
			<view class="repurchase-link" v-if="merchantInfo?.groupBuyLink">
				<text class="link-label">团购链接：</text>
				<uni-link :href="merchantInfo.groupBuyLink" :text="merchantInfo.groupBuyLink" class="link-text"
					underline target="_blank"></uni-link>
			</view>

		</view>
	</view>
</template>


<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import CustomNavBar from "@/components/custom-navbar/index.vue";
	import {
		getMerchantInfo
	} from '@/api/near.js';
	import {
		PeopleDetailCollect,
	} from '@/api/findPeople.js'
	import {
		getLatitude,
		getLongitude
	} from "@/common/util.js";
	// 模拟商家数据（实际应从接口获取）
	const merchantInfo = ref({});
	const merchantId = ref('')
	const merchantLat = ref('')
	const merchantLng = ref('')
	const currentSwiper = ref(0);
	// 定义变量存储接收的item数据
	const itemData = ref(null);

	// 收藏相关状态
	const collectId = ref(''); // 收藏ID
	const isCollected = ref(0); // 收藏状态

	const dotsStyles = reactive({
		backgroundColor: 'rgba(255, 255, 255, 0.5)',
		color: '#fff',
		selectedBackgroundColor: '#ffffff',
		selectedBorder: 'none',
		border: 'none'
	});
	onLoad((options) => {
		if (options.item) {
			itemData.value = JSON.parse(decodeURIComponent(options.item));
			merchantId.value = itemData.value.id
			merchantLat.value = itemData.value.lat
			merchantLng.value = itemData.value.lng
			// console.log('接收的item数据:', itemData.value);
			console.log('merchantId.value', merchantId.value);
		} else {
			console.log('未接收到item数据');
		}
	});
	onMounted(() => {
		getMerchantInfoApi()
	})
	const changeSwiper = (e) => {
		currentSwiper.value = e.detail.current;
	};

	const getMerchantInfoApi = async () => {
		const params = {
			lat: getLatitude(),
			lng: getLongitude(),
			id: merchantId.value
		};

		try {
			const res = await getMerchantInfo(params);
			if (res.code === 200) {
				merchantInfo.value = res.data;
				// 初始化收藏状态
				if (merchantInfo.value) {
					isCollected.value = merchantInfo.value.isCollect || 0;
					collectId.value = merchantInfo.value.id; // 设置收藏ID
				}
			}
		} catch (error) {
			console.error('获取商家信息失败:', error);
			uni.showToast({
				title: '获取商家信息失败',
				icon: 'none'
			});
		}
	};
	const collectHandle = async () => {
		// 检查是否有收藏ID
		if (!collectId.value) {
			uni.showToast({
				title: '无法获取收藏信息',
				icon: 'none'
			});
			return;
		}

		try {
			const params = {
				collectId: collectId.value,
				collectType: "NEAR",
				isCollect: !isCollected.value // 取反当前状态
			};

			const res = await PeopleDetailCollect(params);
			if (res.code === 200) {
				// 更新收藏状态
				isCollected.value = !isCollected.value;

				// 同步更新商家信息中的收藏状态
				if (merchantInfo.value) {
					merchantInfo.value.isCollect = isCollected.value;
				}

				uni.showToast({
					title: isCollected.value ? '收藏成功' : '已取消收藏',
					icon: 'none'
				});
			} else {
				uni.showToast({
					title: res.msg || '操作失败',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error('收藏操作失败:', error);
			uni.showToast({
				title: '操作失败，请重试',
				icon: 'none'
			});
		}
	};

	// 返回上一页
	const goBack = () => {
		uni.navigateBack({
			delta: 1
		});
	};

	// 导航到地图
	const navigateToMap = () => {
		uni.openLocation({
			latitude: merchantInfo.value.lat,
			longitude: merchantInfo.value.lng,
			name: merchantInfo.value.merName,
			address: merchantInfo.value.merAddress
		});
	};

	// 拨打电话
	const makeCall = () => {
		uni.makePhoneCall({
			phoneNumber: merchantInfo.value.merPhone
		});
	};
</script>


<style lang="scss" scoped>
	.page-container {
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.merchant-box {
		width: 100%;
		height: 463rpx;

		.swiper-box {
			width: 100%;
			height: 463rpx;

			.swiper-item {
				width: 100%;
				height: 463rpx;

				.merchant-image {
					width: 100%;
					height: 463rpx;
					object-fit: cover;
				}
			}
		}


	}

	.merchant-card {
		background-color: #fff;
		border-radius: 50rpx 50rpx 0rpx 0rpx;
		padding: 40rpx 25rpx;
		margin-top: -40rpx;
		position: relative;



		// 自适应宽高的核心样式
		.box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #EAF3FF;
			border-radius: 20rpx;
			padding: 20rpx 30rpx;
			margin-top: 30rpx;
			// 移除固定高度，让内容决定高度
			width: 100%;
			box-sizing: border-box;

			.address-info {
				// 让地址区域占据剩余空间
				flex: 1;
				min-width: 0; // 允许内容超出时收缩
				padding-right: 20rpx;

				.address-value {
					color: #666;
					font-size: 28rpx;
					font-weight: 500;
					// 允许长地址自动换行
					word-wrap: break-word;
					display: block;
					line-height: 1.4;
				}

				.distance {
					color: #666666;
					font-weight: 400;
					font-size: 24rpx;
					margin-top: 8rpx;
					display: block;
				}
			}

			.contact-info {
				display: flex;
				// 确保按钮区域不会被压缩
				flex-shrink: 0;

				text {
					color: #666666;
					font-weight: 400;
					font-size: 24rpx;
					margin-top: 10rpx;
					white-space: nowrap; // 防止文字换行
				}

				.nav-box {
					display: flex;
					flex-direction: column;
					align-items: center;

					.nav-icon {
						width: 40rpx;
						height: 40rpx;
						flex-shrink: 0;
					}
				}

				.call-box {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-left: 70rpx;

					.call-icon {
						width: 38rpx;
						height: 39rpx;
						flex-shrink: 0;
					}
				}
			}
		}

		.merchant-intro {
			font-size: 28rpx;
			font-weight: 400;
			line-height: 1.6;
			color: #666;
			text-align: justify;
			margin-top: 30rpx;

			// 富文本内样式
			::v-deep {
				p {
					font-size: 28rpx;
					line-height: 1.6;
					color: #666;
					margin-bottom: 10rpx;
				}

				img {
					max-width: 100%;
					height: auto;
					border-radius: 8rpx;
					margin: 10rpx 0;
				}

				a {
					color: #2979FF;
					text-decoration: underline;
				}
			}
		}

		.repurchase-link {
			.link-label {
				font-size: 24rpx;
				color: #666;
				font-weight: 400;
			}
		}

		.dy {
			margin-top: 30rpx;

			.dy-text {
				color: #666666;
				font-weight: 400;
				font-size: 24rpx;
			}
		}

		.merchant-name-box {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.merchant-name {
				font-size: 40rpx;
				font-weight: 500;
				color: #303133;
			}

			.collect-box {
				width: 38rpx;
				height: 37rpx;

				.collect-icon {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
		}

	}

	::v-deep .uni-swiper__dots-box {
		left: 600rpx !important;
		bottom: 60rpx !important;
	}
</style>